import { PageContainer, ProTable } from "@ant-design/pro-components";
import { Button, Space } from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useRef } from "react";

const Page = (props) => {
  const { dispatch } = props;
  const actionRef = useRef();

  const toggleState = (params) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        actionRef.current?.reload();
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      const _status = parseInt(record.sendStatus, 10);
      return (
        <Space>
          {_status === 2 ? (
            <Button
              type="link"
              onClick={() => toggleState({ recordId: record.id })}
            >
              重新发送
            </Button>
          ) : null}
        </Space>
      );
    },
  };

  return (
    <PageContainer>
      <ProTable
        pagination={{
          showSizeChanger: true,
        }}
        rowKey="id"
        actionRef={actionRef}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        scroll={{ x: 1500 }}
        columns={calcColumns({ operate })}
      />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
